<template>
  <div class="CityLetter">
    <ul>
      <li class="item" 
        v-for="(item) in letter" 
        :key="item"
        :ref="item"
        @click="jump" 
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
      >
      {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "CityLetter",
    props: {
      cities: Object
    },
    data() {
      return {
        flag: false,
        startY: '',
        moveY: ''
      }
    },
    computed: {
      letter() {
        return Object.keys(this.cities)
      }
    },
    methods: {
      jump(e) {
        this.$emit('send', e.target.innerText)
      },
      handleTouchStart() {
        this.flag = true
      },
      handleTouchMove(e) {
        if(this.flag) {
          this.startY = this.$el.offsetTop;
          const moveY = e.touches[0].clientY;
          const index = Math.floor((moveY - this.startY) / this.$refs['A'][0].clientWidth);
          if(index >= 0 && index <= this.letter.length) {
            this.$emit('send', this.letter[index])
          }
        }
      },
      handleTouchEnd() {
        this.flag = false
      }
    },
  }
</script>

<style lang="less" scoped>
  .CityLetter {
    position: fixed;
    top: 2rem;
    right: .1rem;
    z-index: 99;
    ul {
      width: .4rem;
      display: flex;
      flex-direction: column;
      li {
        color: #000;
        font-size: .3rem;
        text-align: center;
        line-height: .4rem;
      }
    }
  }
</style>